<template>
  <BasicModal v-bind="$attrs" @register="register" width="800px">
    <!--引用表格-->
    <BasicTable @register="registerTable" ref="tableRef" :rowSelection="rowSelection" style="padding-top:20px;box-sizing: border-box;">
      <!--操作栏-->
      <template #tableTitle>
        <a-tree-select
          placeholder="请选择实验项目"
          v-model:value="itemValue"
          style="width: 50%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeData"
          tree-default-expand-all
          @change="handleItem"
        >
        </a-tree-select>
      </template>
    </BasicTable>
    <template v-slot:footer>
      <a-button type="default" @click="closeModal"> 取消 </a-button>
      <a-button type="primary"  @click="handleOk">确认</a-button>
    </template>
  </BasicModal>
</template>

<script lang="ts" name="items-labItems" setup>
  import { ref, reactive, onMounted,watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columnsItem } from '../LabItemsBasis.data';
  import { itemTree, itemList } from '../LabItemsBasis.api';
  const props = defineProps({
    mainBasisId: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['success','changeSelect']);
  const itemValue = ref();
  const treeData = reactive([]);

  const queryParam = reactive<any>({
    sortId: '',
  });

  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ height: 550 });
  });

  const { tableContext } = useListPage({
    tableProps: {
      api: itemList,
      columns: columnsItem,
      canResize: true,
      useSearchForm: false,
      showIndexColumn: true,
      showActionColumn: false,
      scroll: { y: 500 },
      tableSetting: {
        fullScreen: false,
      },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam);
      },
    },
  });
  const [registerTable, { reload, clearSelectedRowKeys, getSelectRows }, { selectedRowKeys }] = tableContext;

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
  const rowSelection = {
    type: 'checkbox',
    columnWidth: 50,
    onChange: onSelectChange,
  };
  function onSelectChange(selectedRowKeys: (string | number)[]) {
  }
  // 获取树形结构事件回调
  const getItemTree = async () => {
    let result = await itemTree();
    result.result.forEach((item) => {
      const treeItem = {
        title: item.name,
        value: item.id,
        key: item.id,
        children: [],
      };
      if (item.labItemsList && item.labItemsList.length > 0) {
        item.labItemsList.forEach((child) => {
          const childItem = {
            title: child.name,
            value: child.id,
            key: child.id,
          };

          treeItem.children.push(childItem);
        });
      }
      treeData.push(treeItem);
    });
  };
  //树形结构事件回调
  const handleItem = (value) => {
    let canchange = false;
    treeData.forEach((item) => {
      if (item.children && item.children.length > 0) {
        item.children.forEach((ele) => {
          if (ele.value === value) {
            canchange = true;
            return;
          }
        });
      }
    });
    if (canchange) {
      queryParam.sortId = value;
    } else {
      queryParam.sortId = '';
      itemValue.value = null;
    }
    clearSelectedRowKeys();
    reload();
  };
  //点击确认
  function handleOk(){    
    const selectedRows = getSelectRows();
    emit('changeSelect',selectedRows);
    closeModal();
  }
  watch(() => props.mainBasisId,
    (newVal1) => {
      queryParam.sortId = '';
      itemValue.value = null;
    }
  );
  onMounted(() => {
    getItemTree();
  });
  defineExpose({
    reload,
    clearSelectedRowKeys,
    getItemTree,
    itemValue,
    queryParam,
  });
</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 100px !important;
    }
    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }
  :deep(.jeecg-basic-table-header__toolbar) {
    display: none;
  }
</style>
